<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>服务商交易统计</span>
      <div>
        <el-button type="primary" :disabled="exxxx" @click="merchantexcel"
          ><i class="el-icon-download"></i>导出</el-button
        >
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <div class="block">
              <el-date-picker
                v-model="ctime"
                type="daterange"
                :clearable="false"
                align="center"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-form label-width="80px">
              <el-select
                v-model="agentType"
                placeholder="服务商级别"
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 2 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 9
                "
              >
                <el-option key="1" label="一级服务商" v-if="userinfo.rolesId != 2" :value="1"></el-option>
                <el-option key="21" label="二级服务商" :value="2"></el-option>
              </el-select>
              <el-input
                class="merchants"
                v-model.trim="conditions.merchantsno"
                placeholder="服务商名称/编号"
              ></el-input>
            </el-form>
          </div>
          <div class="rightitem">
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="soso"
              :disabled="isDisable"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <div class="stitle">
        <span style="font-weight: bold">合计:</span>
        <span> </span>
      </div>
      <div class="statistical">
        <div class="statisticalitem">
          <div>总交易金额</div>
          <div>
            <span class="red">{{ totalFee }}</span
            >元
          </div>
        </div>
        <div class="statisticalitem">
          <div>总交易笔数</div>
          <div>
            <span class="red">{{ total }}</span
            >笔
          </div>
        </div>
        <div class="statisticalitem">
          <div>总分润</div>
          <div>
            <span class="red">{{ profit }}</span
            >元
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="agentTypeName"
            label="服务商级别"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="agentName"
            label="服务商名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="agentCode"
            label="服务商编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="totalFee"
            label="交易总金额"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="total"
            label="交易总笔数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="profit"
            label="分润"
          ></el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="joininfo(scope.row)"
                >详细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="cur_page"
            :total="total1"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
    </div>
  </div>
</template>

<script>
import { getservice, getAgentStatistics, statisticexcel } from "@/api/api";
export default {
  name: "item-one",
  data: function () {
    return {
      userinfo: {},

      loading: false,
      isDisable: false,
      rolesId: "",
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      total1: 0,
      multipleSelection: [],
      visible: false,
      exxxx: false,
      servicearr: [],
      merchantarr: [],
      pageCount: "",
      ctime: [],
      totalFee: "", //总交易金额
      total: "", //总交易笔数
      profit: "", //总分润
      agentType: "",
      conditions: {
        merchantsno: "",
      },
      pickerOptions: {
        disabledDate(time) {
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate() - 1,
          };
          let timeDate =
            date.year + "-" + date.month + "-" + date.date + " 23:59:59";
          let times = new Date(timeDate).getTime();
          return time.getTime() > times;
        },
        shortcuts: [
          // {
          //   text: '昨天',
          //   onClick(picker) {
          //     const date = new Date();
          //     date.setTime(date.getTime() - 3600 * 1000 * 24);
          //     picker.$emit('pick', date);
          //   }
          // },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          // {
          //   text: '最近三个月',
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          //     picker.$emit('pick', [start, end]);
          //   }
          // }
        ],
      },
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));

    console.log(this.userinfo)
    this.getPermissions();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
    const year = start.getFullYear();
    const month = start.getMonth() + 1;
    const date = start.getDate();
    const date1 = year + "-" + month + "-" + date;
    const date2 = year + "-" + month + "-" + date;
    this.ctime = [date1, date2];
    this.merchantlist();
  },
  mounted() {},
  methods: {
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    joininfo(val) {
      if (this.ctime.length == 0) {
        this.$message({
          message: "请选择时间",
          type: "error",
        });
        return false;
      }
      this.$router.push({
        path: "/servicedealTransactionDetails",
        // query: {
        //   no: val.agentId,
        //   agtp: val.agentType,
        //   st: this.ctime,
        //   agna: val.agentName,
        // }
      });
      sessionStorage.setItem(
        "servicedeal_agentId",
        JSON.stringify(val.agentId)
      );
      sessionStorage.setItem(
        "servicedeal_agentType",
        JSON.stringify(val.agentType)
      );
      sessionStorage.setItem("servicedeal_ctime", this.ctime);
      sessionStorage.setItem(
        "servicedeal_agentName",
        JSON.stringify(val.agentName)
      );
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now(),
        },
      });
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.merchantlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.merchantlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      // this.ctime = []
      this.conditions.merchantsno = "";
    },
    //获取权限
    getPermissions() {
      var aaa = sessionStorage.getItem("userInfo");
      var bbb = JSON.parse(aaa);
      this.rolesId = bbb.rolesId;
      // console.log(this.rolesId)
      // this.serviceinfo.state = this.rolesId
      // this.fid = bbb.fid
    },
    // 搜索
    soso() {
      this.cur_page = 1;
      this.merchantlist();
    },
    // 服务商名称
    querySearch(queryString, cb) {
      let servicearr = this.servicearr;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    serviceid(item) {
      this.conditions.serviceid = item.id;
    },
    // 服务商级别
    servicelevel(val) {
      this.servicearr = [];
      getservice({
        type: val,
      }).then((res) => {
        // console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },

    // 商户列表
    merchantlist() {
      if (this.agentType == "" && this.rolesId !== 2) {
        this.agentType = 1;
      } else if (this.agentType == "" && this.rolesId == 2) {
        this.agentType = 2;
      }
      // console.log(this.rolesId)
      this.loading = true;
      this.isDisable = true;
      getAgentStatistics({
        page: this.cur_page,
        size: this.cur_size,
        startDate: this.ctime[0],
        endDate: this.ctime[1],
        keywords: this.conditions.merchantsno,
        agentType: this.agentType,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.isDisable = false;
          this.loading = false;
          this.merchantarr = res.data.statisticList.list;
          this.totalFee = res.data.totalFee;
          this.total = res.data.total;
          this.profit = res.data.profit;
          this.total1 = res.pageInfo.recordCount;
        } else if (res.code == 500) {
          this.isDisable = false;
          this.loading = false;
          this.$message.error(res.message);
        }
      });
    },
    //导出
    merchantexcel() {
      // console.log(this.ctime[0])
      // console.log(this.ctime[1])
      this.exxxx = true;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      statisticexcel({
        page: this.cur_page,
        size: this.cur_size,
        startDate: this.ctime[0],
        endDate: this.ctime[1],
        agentType: this.agentType,
        keywords: this.conditions.merchantsno,
      }).then((res) => {
        if (res.data.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
          loading.close();
          this.exxxx = false;
        } else if (res.data.code == 200) {
          let elink = document.createElement("a");
          elink.download = "订单统计.xls";
          elink.href = res.data.data;
          elink.click();
          loading.close();
          this.exxxx = false;
        } else {
          this.$message.error(res.data.message);
          loading.close();
          this.exxxx = false;
        }
      });
    },
  },
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
  padding-top: 10px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.445);
    font-size: 13px;
    line-height: 180%;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      color: #f9607d;
      font-size: 18px;
    }
    .blue {
      color: #01aaef;
      font-size: 18px;
    }
  }
}
</style>